<script setup lang="ts">
import { inject, ref } from 'vue'
import { Close, More, Plus } from '@element-plus/icons-vue'
import { BaseScanSeries, EnumScanStatus, NormalScanSeries } from '@renderer/views/multiScanSeriesPage/types'
import { getSeriesKeywords } from '../../../utils/commonFn'
import { useScanStore } from '@renderer/store/pinia/scan'
import { useGlobalLoading } from '@renderer/utils/hooks/useGlobalLoading'

const {
  scanSeriesArr,
  activeScanSeries,
  chooseAddScanSeriesTypeDialogVisible
} = inject('multiSeries') as any
const { showLoading,hideLoading } = useGlobalLoading()

const handleClick = (item) => {
  console.log('click')
  scanStore.scanSeriesInfo.updateActiveScanSeries(item)
  // if (activeScanSeries.id !== item.id) {
  //   showLoading()
  //   setTimeout(() => {
  //     scanStore.scanSeriesInfo.updateActiveScanSeries(item)
  //     hideLoading()
  //   }, 500)
  // }
}
const scanStore = useScanStore()

const handleClose = (item) => {
  scanStore.scanSeriesInfo.removeOneSeries(item)
}

const handleAddSeries = () => {
  chooseAddScanSeriesTypeDialogVisible.value = true
}

enum enumColors  {
  active = 'bg-active',
  not_fit = 'bg-yellow-300',
  fit = 'bg-green-300',
  finish = 'bg-[#C0C4CC]',
  defaultColor = 'bg-gray-500'
}


const getSeriesClass = (series: NormalScanSeries | BaseScanSeries) => {
  if (activeScanSeries.id === series.id) {
    return  enumColors.active
  } else if (series.status === EnumScanStatus.c_not_fit) {
    return enumColors.not_fit
  } else if (series.status === EnumScanStatus.c_fit) {
    return enumColors.fit
  } else if (series.status === EnumScanStatus.finish) {
    return enumColors.finish
  } else if (series.status === EnumScanStatus.getting_img){
    return enumColors.finish
  }else {
    return enumColors.defaultColor
  }
}
const showProgress = (series: NormalScanSeries | BaseScanSeries) => {
  return series.status === EnumScanStatus.getting_img
}

const getProgressIds = (series: NormalScanSeries | BaseScanSeries) => {
  return Array.from(series.eachScoutMap.keys())
}

const getPercentage = (series: NormalScanSeries | BaseScanSeries, id) => {
  const { currentCount, totalImgCount } = (series.eachScoutMap.get(id) as any)
  return currentCount / totalImgCount * 100
}

const checkShowDelete = (item: BaseScanSeries | NormalScanSeries) => {
  return activeScanSeries.id === item.id &&  !([EnumScanStatus.finish,EnumScanStatus.getting_img].includes(item.status))
}
const showSeriesDescModal = ref(false)

const arr = [
  {
    color: enumColors.active,
    desc: '当前的序列'
  },
  {
    color: enumColors.fit,
    desc: '前置条件满足的序列'
  },
  {
    color: enumColors.not_fit,
    desc: '前置条件不满足的序列'
  },
  {
    color: enumColors.finish,
    desc: '扫描完成的序列'
  },
]
</script>

<template>
  <div class="w-full h-full flex items-center px-[5px]">
    <div class="flex flex-col items-center mr-[10px]">
      <span class='text-nowrap mb-[5px]'>扫描序列</span>
      <el-button :icon="More" size="small" circle  @click="showSeriesDescModal = true"/>
    </div>
    <div class="w-full h-full overflow-auto flex-1 flex items-center py-[3px] gap-x-[10px]">
      <div v-for="(item,index) in scanSeriesArr" class="h-full border rounded"
           :key="item.id" @click="handleClick(item)">
        <div class="w-full !h-full  px-[5px] flex flex-col "
             :class="getSeriesClass(item)">
          <div class="flex items-center justify-between flex-1 ">
            <span></span>
            <div class="flex flex-col items-center">
              <div class="flex">
                <span class="truncate inline-block max-w-[80px]">{{ item.scanSeriesName }}</span>
                <span class="inline-block">/ {{ item.scanType }}</span>
              </div>
              <span :class="showProgress(item) ? 'text-xs': 'text-xl'">{{ getSeriesKeywords(item) }}</span>
            </div>
            <el-icon size="30px" class="font-bold"
                     v-if="checkShowDelete(item) "
                     @click.stop="handleClose(item)">
              <Close />
            </el-icon>
            <span v-else class="w-[30px]"></span>
          </div>
          <template v-if="showProgress(item)">
            <template v-for="eachProgressId in getProgressIds(item)">
              <div class="h-[20px] w-full" v-if="!Number.isNaN(getPercentage(item,eachProgressId))">
                <el-progress :percentage="getPercentage(item,eachProgressId)" />
              </div>
            </template>
          </template>


        </div>
      </div>
    </div>

    <el-button class="w-[60px] !h-[60px]" @click="handleAddSeries">
      <el-icon size="50px" class="font-bold">
        <Plus />
      </el-icon>
    </el-button>
  </div>


  <el-dialog
    v-model="showSeriesDescModal"
    width="500"
    title="扫描序列说明"
  >
      <div class="flex flex-col space-y-[10px]">
          <div v-for="item in arr" class="flex space-x-[10px]">
                <div :class="item.color" class="w-[20px] h-[20px] rounded"></div>
                <span>{{item.desc}}</span>
          </div>
      </div>
  </el-dialog>
</template>

<style scoped>

</style>
